<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>缩放</title>
		
		<style  type="text/css">
		.box
		{
			width: 600px;
			height: 300px;
			background-color: aqua;
			transition: all 5s linear;
			transform: translate(-50%,-50%);
		}
		.box :hover
		{
			/* transform: /* scale(0.5,2); *//* skewy(45deg); */
			 transform:  rotate(-45deg);
			
		}
/* 		缩放:
		scale(2); X轴和Y轴同时放大自身宽度的2倍
		scaleX(0.5);X轴缩小自身宽度的0.5倍
		scaleY(-2);沿Y轴反转再放大自身高度的2倍
		scale(0.5,2);X轴缩小0.5倍,Y轴放大2倍 */
/* 		倾斜:
		skew(45deg);沿X轴倾斜45度
		skewX(45deg);沿X轴倾斜45度
		skewY(45deg);沿Y轴倾斜45度
		skew(-45deg,45deg);沿X轴倾斜-45度,沿Y轴倾斜45度 */
		</style>
	</head>
	<body>
	<div class="box"></div>	
	 <!-- 1.转换：transform
	2.位移translate（）
	3.缩放：scale()
	4.倾斜：skew()
	5.旋转：rotate()正数顺时针旋转，负数逆时针旋转；
	 --> 
	</body>
</html>
